@use './mixins' as mixins;

/**
 * WMS页面样式
 * 定义WMS系统中各个页面的特定样式
 */

// WMS页面布局
.wms-page {
  padding: var(--wms-spacing-xl);
  background: var(--wms-bg-color-base);
  min-height: calc(100vh - 60px);
  
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--wms-spacing-xl);
    padding: var(--wms-spacing-lg) var(--wms-spacing-xl);
    background: var(--wms-fill-color-blank);
    border-radius: var(--wms-border-radius-lg);
    box-shadow: var(--wms-box-shadow-light);
    
    .page-title {
      display: flex;
      align-items: center;
      gap: var(--wms-spacing-sm);
      
      .title-icon {
        font-size: var(--wms-font-size-xl);
        color: var(--wms-color-primary);
      }
      
      .title-text {
        font-size: var(--wms-font-size-xl);
        font-weight: var(--wms-font-weight-semibold);
        color: var(--wms-color-text-primary);
      }
    }
    
    .page-actions {
      display: flex;
      gap: var(--wms-spacing-sm);
    }
  }
  
  .page-content {
    background: var(--wms-fill-color-blank);
    border-radius: var(--wms-border-radius-lg);
    box-shadow: var(--wms-box-shadow-light);
    overflow: hidden;
  }
}

// 仓库管理页面样式
.warehouse-page {
  .warehouse-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--wms-spacing-lg);
    margin-bottom: var(--wms-spacing-xl);
    
    .stat-card {
      @include mixins.wms-card;
      text-align: center;
      
      .stat-icon {
        font-size: 32px;
        margin-bottom: var(--wms-spacing-sm);
        color: var(--wms-color-primary);
      }
      
      .stat-value {
        font-size: var(--wms-font-size-xxl);
        font-weight: var(--wms-font-weight-bold);
        color: var(--wms-color-text-primary);
        margin-bottom: var(--wms-spacing-xs);
      }
      
      .stat-label {
        font-size: var(--wms-font-size-sm);
        color: var(--wms-color-text-secondary);
      }
    }
  }
  
  .warehouse-map {
    @include mixins.wms-card;
    margin-bottom: var(--wms-spacing-xl);
    
    .map-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: var(--wms-spacing-lg);
      
      .map-title {
        font-size: var(--wms-font-size-lg);
        font-weight: var(--wms-font-weight-semibold);
        color: var(--wms-color-text-primary);
      }
      
      .map-controls {
        display: flex;
        gap: var(--wms-spacing-sm);
      }
    }
    
    .map-content {
      height: 300px;
      background: var(--wms-fill-color-light);
      border-radius: var(--wms-border-radius-md);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--wms-color-text-secondary);
    }
  }
}

// 库区管理页面样式
.area-page {
  .area-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: var(--wms-spacing-xl);
    
    .warehouse-tree {
      @include mixins.wms-card;
      
      .tree-header {
        padding: var(--wms-spacing-lg);
        border-bottom: 1px solid var(--wms-border-color-light);
        
        .tree-title {
          font-size: var(--wms-font-size-md);
          font-weight: var(--wms-font-weight-semibold);
          color: var(--wms-color-text-primary);
        }
      }
      
      .tree-content {
        padding: var(--wms-spacing-lg);
        
        .el-tree {
          .el-tree-node {
            .el-tree-node__content {
              padding: var(--wms-spacing-sm) 0;
              border-radius: var(--wms-border-radius-sm);
              transition: var(--wms-transition-all);
              
              &:hover {
                background: var(--wms-fill-color-light);
              }
              
              .el-tree-node__label {
                font-size: var(--wms-font-size-sm);
                color: var(--wms-color-text-primary);
              }
            }
            
            &.is-current {
              .el-tree-node__content {
                background: var(--wms-color-primary-light-9);
                color: var(--wms-color-primary);
              }
            }
          }
        }
      }
    }
    
    .area-content {
      @include mixins.wms-card;
    }
  }
}

// 商户管理页面样式
.merchant-page {
  .merchant-filters {
    display: flex;
    gap: var(--wms-spacing-lg);
    margin-bottom: var(--wms-spacing-xl);
    
    .filter-card {
      @include mixins.wms-card(var(--wms-spacing-lg));
      flex: 1;
      text-align: center;
      cursor: pointer;
      transition: var(--wms-transition-all);
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: var(--wms-box-shadow-base);
      }
      
      &.active {
        border-color: var(--wms-color-primary);
        background: var(--wms-color-primary-light-9);
      }
      
      .filter-icon {
        font-size: 24px;
        margin-bottom: var(--wms-spacing-sm);
        color: var(--wms-color-primary);
      }
      
      .filter-label {
        font-size: var(--wms-font-size-md);
        font-weight: var(--wms-font-weight-medium);
        color: var(--wms-color-text-primary);
        margin-bottom: var(--wms-spacing-xs);
      }
      
      .filter-count {
        font-size: var(--wms-font-size-sm);
        color: var(--wms-color-text-secondary);
      }
    }
  }
}

// 商品管理页面样式
.item-page {
  .item-categories {
    display: flex;
    gap: var(--wms-spacing-sm);
    margin-bottom: var(--wms-spacing-xl);
    flex-wrap: wrap;
    
    .category-tag {
      padding: var(--wms-spacing-sm) var(--wms-spacing-md);
      background: var(--wms-fill-color-light);
      border: 1px solid var(--wms-border-color-light);
      border-radius: var(--wms-border-radius-md);
      color: var(--wms-color-text-secondary);
      font-size: var(--wms-font-size-sm);
      cursor: pointer;
      transition: var(--wms-transition-all);
      
      &:hover {
        background: var(--wms-color-primary-light-9);
        border-color: var(--wms-color-primary);
        color: var(--wms-color-primary);
      }
      
      &.active {
        background: var(--wms-color-primary);
        border-color: var(--wms-color-primary);
        color: #fff;
      }
    }
  }
  
  .item-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--wms-spacing-lg);
    
    .item-card {
      @include mixins.wms-card;
      transition: var(--wms-transition-all);
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: var(--wms-box-shadow-base);
      }
      
      .item-image {
        width: 100%;
        height: 160px;
        background: var(--wms-fill-color-light);
        border-radius: var(--wms-border-radius-md);
        margin-bottom: var(--wms-spacing-md);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--wms-color-text-placeholder);
      }
      
      .item-info {
        .item-name {
          font-size: var(--wms-font-size-md);
          font-weight: var(--wms-font-weight-medium);
          color: var(--wms-color-text-primary);
          margin-bottom: var(--wms-spacing-xs);
          @include mixins.wms-text-ellipsis;
        }
        
        .item-code {
          font-size: var(--wms-font-size-sm);
          color: var(--wms-color-text-secondary);
          margin-bottom: var(--wms-spacing-sm);
        }
        
        .item-meta {
          display: flex;
          justify-content: space-between;
          align-items: center;
          
          .item-price {
            font-size: var(--wms-font-size-lg);
            font-weight: var(--wms-font-weight-semibold);
            color: var(--wms-color-primary);
          }
          
          .item-stock {
            font-size: var(--wms-font-size-sm);
            color: var(--wms-color-text-secondary);
          }
        }
      }
      
      .item-actions {
        display: flex;
        gap: var(--wms-spacing-sm);
        margin-top: var(--wms-spacing-md);
        padding-top: var(--wms-spacing-md);
        border-top: 1px solid var(--wms-border-color-lighter);
      }
    }
  }
}

// 库存管理页面样式
.inventory-page {
  .inventory-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--wms-spacing-lg);
    margin-bottom: var(--wms-spacing-xl);
    
    .overview-card {
      @include mixins.wms-card;
      
      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: var(--wms-spacing-lg);
        
        .card-title {
          font-size: var(--wms-font-size-md);
          font-weight: var(--wms-font-weight-semibold);
          color: var(--wms-color-text-primary);
        }
        
        .card-icon {
          font-size: var(--wms-font-size-lg);
          color: var(--wms-color-primary);
        }
      }
      
      .card-content {
        .metric-value {
          font-size: var(--wms-font-size-xxl);
          font-weight: var(--wms-font-weight-bold);
          color: var(--wms-color-text-primary);
          margin-bottom: var(--wms-spacing-xs);
        }
        
        .metric-label {
          font-size: var(--wms-font-size-sm);
          color: var(--wms-color-text-secondary);
        }
        
        .metric-trend {
          display: flex;
          align-items: center;
          gap: var(--wms-spacing-xs);
          margin-top: var(--wms-spacing-sm);
          
          .trend-icon {
            font-size: var(--wms-font-size-sm);
          }
          
          .trend-text {
            font-size: var(--wms-font-size-xs);
          }
          
          &.trend-up {
            color: var(--wms-color-success);
          }
          
          &.trend-down {
            color: var(--wms-color-danger);
          }
        }
      }
    }
  }
  
  .inventory-alerts {
    @include mixins.wms-card;
    margin-bottom: var(--wms-spacing-xl);
    
    .alerts-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: var(--wms-spacing-lg);
      
      .alerts-title {
        font-size: var(--wms-font-size-lg);
        font-weight: var(--wms-font-weight-semibold);
        color: var(--wms-color-text-primary);
      }
      
      .alerts-count {
        @include mixins.wms-status-tag(var(--wms-color-warning), #fff);
      }
    }
    
    .alerts-list {
      .alert-item {
        display: flex;
        align-items: center;
        padding: var(--wms-spacing-md);
        border: 1px solid var(--wms-border-color-light);
        border-radius: var(--wms-border-radius-md);
        margin-bottom: var(--wms-spacing-sm);
        transition: var(--wms-transition-all);
        
        &:hover {
          background: var(--wms-fill-color-light);
        }
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .alert-icon {
          font-size: var(--wms-font-size-lg);
          margin-right: var(--wms-spacing-md);
          
          &.warning {
            color: var(--wms-color-warning);
          }
          
          &.danger {
            color: var(--wms-color-danger);
          }
        }
        
        .alert-content {
          flex: 1;
          
          .alert-title {
            font-size: var(--wms-font-size-md);
            font-weight: var(--wms-font-weight-medium);
            color: var(--wms-color-text-primary);
            margin-bottom: var(--wms-spacing-xs);
          }
          
          .alert-desc {
            font-size: var(--wms-font-size-sm);
            color: var(--wms-color-text-secondary);
          }
        }
        
        .alert-time {
          font-size: var(--wms-font-size-xs);
          color: var(--wms-color-text-placeholder);
        }
      }
    }
  }
}

// 订单管理页面样式
.order-page {
  .order-tabs {
    margin-bottom: var(--wms-spacing-xl);
    
    .el-tabs__header {
      background: var(--wms-fill-color-blank);
      border-radius: var(--wms-border-radius-lg) var(--wms-border-radius-lg) 0 0;
      padding: 0 var(--wms-spacing-xl);
    }
  }
  
  .order-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--wms-spacing-lg);
    margin-bottom: var(--wms-spacing-xl);
    
    .stat-item {
      @include mixins.wms-card(var(--wms-spacing-lg));
      text-align: center;
      
      .stat-number {
        font-size: var(--wms-font-size-xxl);
        font-weight: var(--wms-font-weight-bold);
        color: var(--wms-color-primary);
        margin-bottom: var(--wms-spacing-xs);
      }
      
      .stat-text {
        font-size: var(--wms-font-size-sm);
        color: var(--wms-color-text-secondary);
      }
    }
  }
}

// 报表页面样式
.report-page {
  .report-filters {
    @include mixins.wms-card;
    margin-bottom: var(--wms-spacing-xl);
    
    .filter-form {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: var(--wms-spacing-lg);
      align-items: end;
    }
  }
  
  .report-charts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: var(--wms-spacing-xl);
    margin-bottom: var(--wms-spacing-xl);
    
    .chart-card {
      @include mixins.wms-card;
      
      .chart-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: var(--wms-spacing-lg);
        
        .chart-title {
          font-size: var(--wms-font-size-lg);
          font-weight: var(--wms-font-weight-semibold);
          color: var(--wms-color-text-primary);
        }
        
        .chart-actions {
          display: flex;
          gap: var(--wms-spacing-sm);
        }
      }
      
      .chart-content {
        height: 300px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--wms-fill-color-light);
        border-radius: var(--wms-border-radius-md);
        color: var(--wms-color-text-secondary);
      }
    }
  }
}
